import React, { useEffect, useMemo, useState } from "react";
import { history, useLocation } from "@umijs/max";
import "./index.less"
import { receivableBillTypes } from "@/constants/types";
import { Col, Form, Row, Space, Table } from "antd";
import { billDetail } from "../services";
import XlTableDictColumn from "@/components/Table/XlTableDictColumn";
import { isCbmPrice, isKgsPrice, isTicketSettlement } from "@/utils/dictUtil";

type receivableBillPart = {
  orderInfo: receivableBillTypes;
}
const {Item} = Form;

const BillHeader = ({billInfo}: {billInfo: receivableBillPart | null}) => {


  const fields = [
    {
      label: '应收单号',
      value: billInfo?.billCode
    },
    {
      label: '状态',
      value: <XlTableDictColumn value={billInfo?.status} type="billStatus" />
    },
    {
      label: '付款节点',
      value: billInfo?.payNodeText
    },
    {
      label: '生成时间',
      value: billInfo?.createTime
    },
    {
      label: '周次',
      value: billInfo?.week
    },
  ];

  return (
    <div className="order-header">
      <Space size={30} style={{flexWrap: 'wrap', flex: 1, marginRight: 30}}>
        {
          fields?.map((field) => (
            <Item label={field.label} style={{marginBottom: 0}} key={field.label}>
              <strong>{field.value}</strong>
            </Item>
          ))
        }
      </Space>
    </div>
  );
}

const BillInfoCard = ({list, billInfo}: {list: any [], billInfo: receivableBillTypes}) => {

  return (
    <Space direction="vertical" style={{width: '100%'}}>
      {
        list?.map(v => (
          <Item label={v.label} style={{marginBottom: 0, ...(v.style || {})}} key={v.label}>
            <strong>{v.render ? v.render(billInfo) : billInfo?.[v?.value]}</strong>
          </Item>
        ))
      }
    </Space>
  );
}


const ReceivableBillDetail = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const billId = searchParams.get('billId');
  
  const [billInfo, setBillInfo] = useState<receivableBillPart | null>(null);

  const fields = [
    {
      key: '1',
      children: [
        {
          label: '客户简称',
          value: 'customerName',
        },
        {
          label: '客户编码',
          value: 'customerCode'
        },
        {
          label: '下单手机',
          value: 'mobile'
        },
        {
          label: '所属销售',
          value: 'salesName',
        },
      ]
    },
    {
      key: '2',
      children: [
        {
          label: '结算方式',
          value: "settlementMethod"
        },
        {
          label: '是否逾期',
          value: 'overDueFlag',
          render: (record: receivableBillTypes) => <span>{String(record?.overDueFlag) === '1' ? '是' : '否'}</span>
        },
        
      ]
    },
    {
      key: '3',
      children: [
        {
          label: '账单金额/元',
          value: 'amount'
        },
        {
          label: '已付金额/元',
          value: 'payAmount'
        },
        {
          label: '余额/元',
          value: 'leftAmount'
        },
        {
          label: '币种',
          value: 'currency'
        },
      ]
    },
  ];

  const goodsInfo = [
    {
      label: '件/箱数',
      value: 'inWhPieces'
    },
    {
      label: '计费方式',
      render: (record: receivableBillTypes) => <XlTableDictColumn value={record?.billMethod} type="paymethod" />
    },
    {
      label: '计费体积/CBM',
      value: 'feeVol'
    },
    {
      label: '计费重量/KGS',
      value: 'feeWeight'
    },
    {
      label: '最低起收',
      render: (record: receivableBillTypes) => {
        if (isKgsPrice(record?.billMethod)) {
          return <span>{record?.minTake || 0} KGS</span>
        }
        if (isCbmPrice(record?.billMethod)) {
          return <span>{record?.minTake || 0} CBM</span>
        }
        return '-';
      }
    },
  ];

  const columns = [
    {
      title: "费用项",
      dataIndex: "feeName"
    },
    {
      title: "计费体积/计费重",
      dataIndex: "unit",
      render: (_, record: receivableBillTypes) => <span>{record?.num}{record?.unit}</span>
    },
    {
      title: "单价",
      dataIndex: "price"
    },
    {
      title: "费用/元",
      dataIndex: "amount"
    },
  ];

  useEffect(() => {
    if (billId && location.pathname === '/finance-manage/receivable-bill-detail') {
      billDetail({id: billId}).then(
        res => {
          setBillInfo(res || {});
        }
      )
    }
  }, [billId]);

  return (
    <>
       <BillHeader billInfo={billInfo} /> 
       <Row style={{marginTop: 20}} gutter={20}>
        {
          fields?.map((part: any) => {

            return (
              <Col span={8} key={part.key}>
                <BillInfoCard list={part.children} billInfo={billInfo} />
              </Col>
            );
          })
        }
      </Row>
      <div style={{marginTop: 20}}>
        <div>
          <strong>货物信息</strong>
        </div>
        <Space>
          {goodsInfo?.map((field:any) => {
            return (
              <Item label={field.label} style={{marginBottom: 0, marginRight: 30}} key={field.label}>
                <strong>{field.render ? field.render(billInfo) : billInfo?.[field?.value]}</strong>
              </Item>
            );
          })}
        </Space>
      </div>
      <div style={{marginTop: 20}}>
        <div>
          <strong>货物信息</strong>
        </div>
        <Table
          style={{marginTop: 10}}
          rowKey="feeCode"
          bordered
          columns={columns}
          dataSource={billInfo?.feeItems || []}
        />
      </div> 
      <Item label="备注" style={{marginBottom: 0, marginTop: 20}}>
        <strong>{billInfo?.remark}</strong>
      </Item>
    </>
  );
}
export default ReceivableBillDetail;
